﻿/* 
| - - Motion.Euzo.Ca - - - Motion and M+ from euzo.ca - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - |
*/

/*

This tabs control draws a horizontal or a vertical like with tab headers, this control does not contain the data for each tab, 
you must manually wire the "on tab change" event and take control of hiding and showing the tab content.

How does it work?
- The style sheet styles the control.
- The script locates all tags and wires them with the appropriate click events.
- The script will call the on tab change event once a tab is changed.

This tab control is very similar to a menu or navigation.

*/


// Create the motion namespace if no one else has created it yet.
if (!Motion)
{
    var Motion = {};
}

(function ()
{
    // Create the framework namespace if it was not created yet.
    if (!Motion.Framework)
    {
        Motion.Framework = {};
    }
})();


(function ()
{
    // * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *    
    Motion.Framework.Tabs = {};
    var Tabs = Motion.Framework.Tabs // Shortcut to the tabs namespace.

    // * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *    
    // Once the document is loaded, look for all tabs and assigns them with the required functions, the tabs are html 
    // tags that are styled by CSS and functioning by Script.
    Motion.Framework.Tabs.OnLoad = function ()
    {
        window.removeEventListener('load', Tabs.OnLoad, false);

        var TabsTags = document.all.tags("tabs");
        if (TabsTags != null)
        {        
            for (TabsIndex = 0; TabsIndex < TabsTags.length; TabsIndex++)
            {
                var TabsTag = TabsTags[TabsIndex];
                TabsTag.MoveDirection = TabsTag.getAttribute('direction');
                if (TabsTag.MoveDirection)
                {
                    TabsTag.MoveDirection = TabsTag.MoveDirection.toLowerCase()                   
                }
            }
        }

        var TabTags = document.all.tags("tab");
        if (TabTags != null)
        {        
            for (TabIndex = 0; TabIndex < TabTags.length; TabIndex++)
            {
                var TabTag = TabTags[TabIndex];
                TabTag.addEventListener('click', Tabs.OnClick, false)
            }
        }
    }

    // * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *   
    Motion.Framework.Tabs.OnClick = function ()
    {
        alert('Tab Page Clicked!');
    }

})();


// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *    
// Wait until the entire page is loaded with all external scripts and files, then initialize the page.
window.addEventListener('load', Motion.Framework.Tabs.OnLoad, false);
